<template>
  <div>
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-title">
          <p>智慧买入:均线定投策略</p>
        </div>
        <div class="panel_wrap-info">
          <p class="strategy-discribe">
            跟踪客户选择的市场行情指数，定期不定额买入，指数在低位就多买，摊薄成本。
          </p>
          <div class="chart-wrap">
            <div class="strategy-chart"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-title">
          <p>过去5年定投回测业绩</p>
        </div>
        <div class="panel_wrap-info">
          <div class="compare_wrap-img">
            <div class="left-img">
              <div class="label">均线策略</div>
              <div class="value">162.58%</div>
            </div>
            <div class="right-img">
              <div class="label">普通定投</div>
              <div class="value">90%</div>
            </div>
          </div>
          <div class="compare_wrap-chart">
            <div class="chart-date">2020-06-06</div>
            <div class="chart-wrap">
              <div class="compare-chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel_wrap">
      <div class="panel_wrap-inner">
        <div class="panel_wrap-info">
          <div class="indicate-cell flex islink" @click="showIndicate = true">
            <p class="indicate-title">指数选择</p>
            <p class="indicate-discribe">创业指，180日均线</p>
          </div>
          <div class="v-1px-b"></div>
          <div class="earnings-order">收益排行</div>
          <ul>
            <li class="order-item">
              <div class="indicate-name">创业指，180日均线</div>
              <div class="earnings-value">
                <span class="earnings-number">162.5%</span>
                <van-checkbox v-model="checked"></van-checkbox>
              </div>
            </li>
            <li class="order-item">
              <div class="indicate-name">创业指，180日均线</div>
              <div class="earnings-value">
                <span class="earnings-number">162.5%</span>
                <van-checkbox v-model="checked"></van-checkbox>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <a href="javascript:;" class="btn-buy">确定</a>
    </div>
    <van-popup v-model="showIndicate" position="bottom">
      <van-picker
        title="指数设置"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Picker, Popup } from "vant";
export default {
  name: "strategy-setting",
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
  data() {
    return {
      checked: "",
      showIndicate:false,
      columns: ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州"],
    };
  },
  mounted() {},
  methods: {
    onConfirm(value, index) {
      this.showIndicate=false
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value,picker}, 当前索引：${index}`);
    },
    onCancel() {
      this.showIndicate=false
      console.log("取消");
    },
  },
};
</script>

<style lang="less" scoped>
.panel_wrap {
  .panel_wrap-inner {
    .panel_wrap-title {
      font-size: 15px;
      font-weight: bold;
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      .title-right {
        font-size: 13px;
        font-weight: normal;
        color: #1f6aff;
      }
    }
    .panel_wrap-info {
      font-size: 15px;
      color: #333;
      .strategy-discribe {
        font-size: 13px;
        color: #999999;
        letter-spacing: 0;
        line-height: 20px;
      }
      .chart-wrap {
        height: 156px;
        padding: 16px 0;
      }
    }
  }
}

.compare_wrap-img {
  position: relative;
  height: 68px;
  .left-img,
  .right-img {
    position: absolute;
    width: 170px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .label {
      font-size: 13px;
      color: #666666;
      line-height: 2;
      letter-spacing: 0;
      text-align: center;
    }
    .value {
      font-size: 18px;
      letter-spacing: 0;
      text-align: center;
    }
  }
  .left-img {
    left: 0;
    top: 0;
    background-image: url(../../assets/images/invest/stratey_compare_left@2x.png);
    .value {
      color: #ff5952;
    }
  }
  .right-img {
    right: 0;
    bottom: 0;
    background-image: url(../../assets/images/invest/stratey_compare_right@2x.png);
    .value {
      color: #1f6aff;
    }
  }
}
.compare_wrap-chart {
  .chart-date {
    font-size: 12px;
    color: #333333;
    line-height: 2;
  }
  .chart-wrap {
    padding: 10px 0;
  }
  .compare-chart {
    height: 158px;
  }
}
.indicate-cell {
  height: 44px;
  align-items: center;
  color: #333333;
  .indicate-title {
    font-size: 15px;
  }
  .indicate-discribe {
    font-size: 14px;
  }
}
.earnings-order {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.order-item {
  height: 44px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #666666;
  .earnings-value {
    display: flex;
    .earnings-number {
      margin: 0 8px;
    }
  }
}
.footer {
  text-align: center;
  padding: 31px 0 25px;
  .btn-buy {
    width: 345px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    color: #fff;
    display: inline-block;
    letter-spacing: 1px;
    background-image: linear-gradient(90deg, #3861fe 0%, #489bfe 100%);
    border-radius: 22px;
    &[disabled="disabled"] {
      background-image: linear-gradient(90deg, #d8e0ff 0%, #dbebff 100%);
    }
  }
}
</style>